<script setup>
import {onMounted,defineProps} from 'vue'
import * as echarts from 'echarts';

const props=defineProps(
  {
    statistics:{type:Array,default:()=>[]}
  }
)

// console.log( props.statistics,' props.statistics.value');


onMounted(()=>{
var chartDom = document.getElementById('officialSquib');
var myChart = echarts.init(chartDom);
var option;
option = {
  tooltip: {
    trigger: 'item'
  },
  series: [
    {
      type: 'pie',
      // radius: '40%',
      avoidLabelOverlap: false,
      // left:'-1%',
      radius: ['25%', '40%'],  // 这里设置内外半径，形成圆环形
      center: ['50%', '45%'],  // 确保圆环图形位于图表中心
      itemStyle: {
        // borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      data: props.statistics,
      // [
      //   { value: 1048, name: '压力过低',itemStyle: { color: '#65A0FF' } },
      //   { value: 735, name: '设备离线' ,itemStyle:{color:'#36E8DF'}},
      //   { value: 580, name: '设备故障' ,itemStyle:{color:'#FFCE57'}},
      // ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      },
      label: {
      show: true,
      position: 'outside',  // 标签位置，可以设置为 'inside'、'outside'、'center'
      formatter: function(params) {
        return `${params.name}\n${params.value}个`; // 在这里定义标签的格式，换行显示名称和值
      },
      fontSize: 10,
      fontWeight: 'bold',
      color: '#666666', // 字体颜色
      fontFamily: 'PingFangSC-Regular',
    } 
    }
  ]
};

option && myChart.setOption(option);

})


</script>

<template>
  <div style="height: 250px;width: 250px;margin-left:25px" id="officialSquib"></div>
</template>

<style>

</style>